<template>
	<div style="width: 100%; height: 100%; position: relative">
		<div :id="idname" style="width: 100%; height: 100%"></div>
	</div>
</template>

<script>
	import echarts from "echarts";
	import { EleResize } from "@/utils/esresize.js";
	export default {
		props: {
			idname: {
				type: String,
				required: true,
			},
			datalist: {
				type: Object,
				default: function () {
					return {
						title: [],
						data: [],
					};
				},
			},
		},
		watch: {
			datalist: {
				handler(val, oldVal) {
					this.chartColumn();
				},
				deep: true,
			},
		},
		data() {
			return {
				datalist_copy: {
					title: [
						"02-01",
						"02-02",
						"2020-02-03",
						"2020-02-04",
						"2020-02-05",
						"2020-02-06",
						"2020-02-07",
						"2020-02-08",
						"2020-02-09",
						"2020-02-10",
						"2020-02-11",
						"2020-02-12",
						"2020-02-13",
						"2020-02-14",
						"2020-02-15",
						"2020-02-16",
						"2020-02-17",
						"2020-02-18",
						"02-19",
					],
					data: [
						12000, 34000, 45000, 1300, 5450, 3100, 34000, 4350, 2600, 3400, 1300,
						4500, 4500, 1200, 3100, 45000, 4500, 4500, 1200, 3100, 4500,
					],
				},
			};
		},
		methods: {
			// 只适用图表方法
			drawLine(dom, option) {
				if (document.getElementById(dom)) {
					let myChart = echarts.init(document.getElementById(dom));
					let resizeDiv = document.getElementById(dom);
					myChart.clear();
					myChart.setOption(option);
					let listener = function () {
						myChart.resize();
					};
					EleResize.on(resizeDiv, listener);
				}
			},
			chartColumn(type) {
				// 折线图
				let dom = this.idname;
				let option = {
					tooltip: {
						show: true,
						trigger: "axis",
						formatter: "{b} : {c}",
						axisPointer: {
							type: "cross",
							label: {
								backgroundColor: "#03A98E",
							},
						},
					},
					grid: {
						top: 20,
						bottom: 20,
					},
					xAxis: {
						type: "category",
						boundaryGap: false,
						axisLabel: {
							show: true,
							showMaxLabel: true,
							textStyle: {
								color: "#B6B6B6",
							},
							padding: [0, 5, 0, 7],
						},
						axisLine: {
							lineStyle: {
								color: "#B6B6B6",
							},
						},

						axisTick: {
							show: false,
						},
						// data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
						// data: this.datalist.title,
						data: this.datalist_copy.title,
					},
					yAxis: {
						axisLine: {
							lineStyle: {
								color: "rgba(107,107,107,0.37)",
							},
						},
						splitLine: {
							show: false,
						},
						axisLabel: {
							show: true,
							textStyle: {
								color: "#B6B6B6",
							},
							formatter: function (value, index) {
								if (value >= 10000 && value < 10000000) {
									value = value / 10000 + "万";
								} else if (value >= 10000000) {
									value = value / 10000000 + "千万";
								}
								return value;
							},
						},
						axisLine: {
							lineStyle: {
								color: "#B6B6B6",
							},
						},
						axisTick: {
							show: false,
						},
						type: "value",
					},
					series: [
						{
							name: "demoi",
							// data: [820, 932, 901, 934, 1290, 1330, 1320],
							// data: this.datalist.data,
							data: this.datalist_copy.data,
							symbol: "circle",
							// symbol: "none",
							symbolSize: 4,
							smooth: true, //这句就是让曲线变平滑的
							type: "line",
							lineStyle: {
								normal: {
									color: "rgba(0, 148, 255, 1)",
								},
							},
							itemStyle: {
								normal: {
									borderWidth: 3,
									borderColor: "#BAFFF4",
									color: "#03A98E",
									areaStyle: {
										color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
											{
												offset: 0,
												color: "rgba(32, 184, 237, 0.02)",
											},
											{
												offset: 1,

												color: "rgba(0, 148, 255, 0.7)",
											},
										]),
									},
								},
							},
						},
					],
				};

				this.drawLine(dom, option);
			},
		},
		mounted() {
			this.chartColumn();
		},
	};
</script>

<style>
</style>
